<template>
  <div>
    <div class="header">
      <span class="iconfont icon-zuo" @click="back_btn"> </span>
      <div class="search">
        <span class="iconfont icon-sousuo"></span>
        <input
          type="text"
          placeholder="请输入搜索关键字"
          v-model="keyword"
          @keyup.enter="handelSearch"
        />
      </div>
      <div class="search_btn" @click="handelSearch">搜索</div>
    </div>
    <div class="record">
      <div class="title">
        <h4>历史记录</h4>
      </div>
      <div class="history_list">
        <div
          class="item"
          v-for="(item, index) in history"
          :key="index"
          @click="handelSend(item)"
        >
          {{ item }}
        </div>
      </div>
      <div class="title">
        <h4>热门搜索</h4>
      </div>
      <div class="history_list">
        <div
          class="item"
          v-for="(item, index) in hot"
          :key="index"
          @click="handelSend(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="list">
      <PostItem v-for="(item, index) in list" :key="index" :item="item" />
    </div>
  </div>
</template>

<script>
import PostItem from "@/components/PostItem";
export default {
  data() {
    return {
      history: [],
      hot: ["美女", "关晓彤", "阿信"],
      keyword: "",
      list: [],
    };
  },
  components: {
    PostItem,
  },
  watch: {
    keyword(value) {
      // 1.if (this.keyword === "") {
      //   this.list = [];
      // }
      // 2.
      if (!value) {
        this.list = [];
      }
    },
    // 监听历史记录发生变化保存到本地存储
    history() {
      localStorage.setItem("history", JSON.stringify(this.history));
    },
  },
  created() {
    // 获取历史记录
    const history = JSON.parse(localStorage.getItem("history"));
    if (history) {
      this.history = history;
    }
  },
  methods: {
    // 点击搜索和回车按键触发的事件
    handelSearch() {
      // 把当前的搜索关键字添加到历史记录里面
      if (this.history.indexOf(this.keyword) === -1) {
        this.history.unshift(this.keyword);
      }
      // 把搜索关键字保存到本地
      localStorage.setItem("history", this.history);
      console.log(this.history);

      // 调用搜索接口
      this.search();
      // 把输入框内容清空
      this.keyword = "";
    },
    // 点击历史记录和热门搜索事件
    handelSend(item) {
      this.keyword = item;
      this.search();
    },
    // 返回按钮
    back_btn() {
      if (this.list.length === 0) {
        this.$router.back();
      } else {
        this.list = [];
      }
    },
    //封装搜索功能
    search() {
      if (this.keyword.trim() === "") return;
      this.$axios({
        url: "/post_search",
        params: {
          keyword: this.keyword,
        },
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  .search {
    align-items: center;
    padding: 2px 15px;
    height: 30px;
    display: flex;
    margin: 0 20px;
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 18px;
    input {
      border: none;
      padding-left: 10px;
    }
  }
  .search_btn {
    font-size: 15px;
    color: #333;
  }
}
.record {
  padding: 0 20px;
  .title {
    h4 {
      color: #333;
      margin: 10px 0;
    }
  }
  .history_list {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    padding: 2px 5px;
    margin: 10px;
  }
}
</style>
